<template>
  <div>
    <div style="width:25%;display:inline-block;">
      <el-input placeholder="请输入内容" v-model="searchStr">
        <template slot="prepend">用户名称</template>
      </el-input>
    </div>
    <!--操作区-->
    <el-button type="primary" icon="el-icon-search" >搜索 </el-button>

    <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true" circle>新增</el-button>
    <!--表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px" >{{  scope.row.date | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.age }}</span>
        </template>
      </el-table-column>

      <el-table-column label="爱好">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.favorite }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000" style="float:right">
    </el-pagination>
    <!--模态框-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户年龄" :label-width="formLabelWidth">
          <el-input-number v-model="form.age" :min="1" :max="129" label="年龄"  style="width:791.5px"></el-input-number>
        </el-form-item>
        <el-form-item label="登记日期" :label-width="formLabelWidth">
          <el-date-picker v-model="form.date" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1"   style="width:791.5px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作" :label-width="formLabelWidth">
          <el-input v-model="form.job" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="爱好" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.favorite">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave(form,true)">确 定</el-button>

        <el-button @click="handleSave(form,false)">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>  
  export default {
    data() {
      return {
        searchStr: '',
        tableData: [{
          date: '2018-10-25',
          name: '席卫卫',
          address: '山西省运城市不知道那里的县',
          age: 18,
          job: '码农',
          favorite: '搬砖搬砖搬砖'
        }, {
          date: new Date(),
          name: '席大卫',
          address: '上海市普陀区金沙江路 1517 弄',
          age: 18,
          job: '码农',
          favorite: '搬砖搬砖搬砖'
        }, {
          date:new Date(),
          name: '席小卫',
          address: '上海市普陀区金沙江路 1519 弄',
          age: 18,
          job: '码农',
          favorite: '搬砖搬砖搬砖'
        }, {
          date: new Date(),
          name: '大卫~科波菲尔',
          address: '上海市普陀区金沙江路 1516 弄',
          age: 18,
          job: '码农',
          favorite: '搬砖搬砖搬砖'
        }],
        form: {
          date: '',
          name: '',
          address: '',
          age: '',
          job: '',
          favorite: ''
        },
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        } 


      }
    },
    methods: {
      handleEdit(index, row) {
        this.dialogFormVisible = true
        this.form=row
      },
      handleDelete(index, row) {
        this.tableData.splice(index,1)
      },
      handleSave(form, flag) {
        if (flag && !form.name) { 
          this.tableData.push(form)        
        }
        if(flag)
        this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
        })
        this.form={}
        this.dialogFormVisible = false
       
      } 
    }
  }

</script>
